<template>
  <div class="life-info">
    <flex-box class="life-info-wrapper" wrap>
      <flex-box v-for="(item, index) in list" :key="index"
                class="life-info-item" center-h-v vertical>
        <div>
          <image-box :src="item.icon" size="30" />
        </div>
        <div>{{item.title}}</div>
      </flex-box>
    </flex-box>
  </div>
</template>

<script>

import FlexBox from "@/components/flex-box/index";
import ImageBox from "@components/image-box";
export default {
  name: "LifeInfo",
  components: {ImageBox, FlexBox},
  data() {
    return {
      list: [
        {
          icon: require('@assets/icon/weather/chuanyi.png'),
          title: '适宜短袖'
        },
        {
          icon: require('@assets/icon/weather/chuanyi.png'),
          title: '紫外线较强'
        },
        {
          icon: require('@assets/icon/weather/chuanyi.png'),
          title: '宜室内运动'
        },
        {
          icon: require('@assets/icon/weather/chuanyi.png'),
          title: '不宜洗车'
        },
        {
          icon: require('@assets/icon/weather/chuanyi.png'),
          title: '有雨带伞'
        },
        {
          icon: require('@assets/icon/weather/chuanyi.png'),
          title: '少发感冒'
        },
      ]
    }
  },
  methods: {},

  created() {

  },

  mounted() {

  }

}
</script>

<style lang="scss" scoped>
.life-info {
  margin-top: 10px;
  margin-bottom: 40px;
  background-color: rgba(255,255,255, .3);
  border-radius: 20px;
  width: 100%;
  height: 200px;
  font-size: 0.8rem;
  .life-info-wrapper {
    height: 100%;
    .life-info-item {
      width: calc(100% / 3);
      height: 50%;
    }
  }
}
</style>
